<template>
    <div id="box">
        <!-- v-for="count in list.InboundDetails.length" :key="count" -->
        <div class="box">
            <div class="header" v-if="list.InboundOrder">
                <p style="text-align:center;font-size:22px;font-weight:600;width:90%">青岛泰康云医疗科技有限公司即墨泰康云诊所药房入库单</p>
                <div style="font-size:14px;padding-top:10px;display:flex;width:90%">
                    <div style="flex:1">采购单号:{{list.InboundOrder.IDONum}}</div>
                    <div style="flex:1">入库类型:外购入库</div>
                    <div style="flex:1">购进日期:{{list.InboundOrder.CreateTime.substring(0,10)}}</div>
                    <div style="flex:1;">打印时间:{{time}}</div>
                </div>
                <div style="font-size:14px;padding-top:10px;display:flex">
                    <div style="flex:1">入库诊室:药房</div>
                    <div>供货商名称:{{list.InboundOrder.SupplierName}}</div>

                    <div style="flex:1;margin-left:20px">录入员:黄心悦</div>
                </div>
            </div>
            <div class="content">
                <el-table
                    :data="list.InboundDetails"
                    style="width:90%;font-size:18px;min-height:550px;border-top:1px solid #ccc"
                    :header-cell-style="{fontSize:'18px !important'}"
                    header-row-class-name="tableHead"
                >
                    <el-table-column prop="ProName" label="名称">
                        <template slot-scope="scope">
                            <span v-if="scope.row.PSName==''">{{scope.row.ProName}}</span>
                            <span v-else>{{scope.row.ProName}}({{scope.row.PSName}})</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="Spec" label="规格" width="110px"></el-table-column>
                    <el-table-column prop="UnitSales" label="单位" width="50px"></el-table-column>
                    <el-table-column prop="FactoryName" label="厂家"></el-table-column>
                    <!-- <el-table-column prop="address" label="批号"></el-table-column> -->
                    <el-table-column prop="ExpireDate" label="有效期" width="83px">
                        <template slot-scope="scope" v-if="scope.row.ExpireDate">
                            <span>{{scope.row.ExpireDate.substring(0,10)}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="PCount" label="数量" width="50px"></el-table-column>
                    <el-table-column prop="PCost" label="进价" width="50px"></el-table-column>
                    <el-table-column label="进额" width="50px">
                        <template slot-scope="scope">
                            <span>{{(scope.row.PCost*scope.row.PCount).toFixed(2)}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="PriceNew" label="零价" width="50px"></el-table-column>
                    <el-table-column prop="address" label="零额" width="50px">
                        <template slot-scope="scope">
                            <span>{{(scope.row.PriceNew*scope.row.PCount).toFixed(2)}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="差额" width="50px">
                        <template slot-scope="scope" v-if="scope.row.PriceNew*scope.row.PCount">
                            <span>{{((scope.row.PriceNew*scope.row.PCount)-(scope.row.PCost*scope.row.PCount)).toFixed(2)}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="StdDocID" label="批准文号" width="132px"></el-table-column>
                </el-table>
            </div>
            <div class="footer">
                <div style="display:flex">
                    <div style="flex:1"></div>
                    <div style="flex:1;display:flex">
                        <div style="flex:1" v-if="AdvanceAmount">进额：{{AdvanceAmount.toFixed(2)}}</div>
                        <div style="flex:1" v-if="ZeroAmount">零额：{{ZeroAmount.toFixed(2)}}</div>
                        <div style="flex:1;margin-right:80px" v-if="Difference">差额：{{Difference.toFixed(2)}}</div>
                    </div>
                </div>
                <!-- <div style="display:flex;margin-top:10px">
                    <div style="flex:1"></div>
                    <div style="flex:1;display:flex">
                        <div style="flex:1">总计：1070.35</div>
                        <div style="flex:1">总计：1038.50</div>
                        <div style="flex:1;margin-right:80px">总计：268.15</div>
                    </div>
                </div>-->
                <div style="display:flex;margin-top:10px">
                    <div style="flex:1">验收结论：</div>
                    <div style="flex:1;">验收人：</div>
                    <div style="flex:1">审核人：</div>
                    <div style="flex:1">财务会计：</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
//import { setTimeout } from 'timers'
export default {
    props: {
        dataArr: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    data() {
        return {
            value: [],
            list: {},
            time: null,
            AdvanceAmount: null,
            ZeroAmount: null,
            Difference: null,
            tableData: [
                {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区'
                },
                {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区'
                },
                {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区'
                },
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区'
                },
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区'
                },
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区'
                },
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区'
                }
            ]
        }
    },
    mounted() {
        this.list = this.dataArr

        for (var i = 0; i < this.list.InboundDetails.length; i++) {
            this.AdvanceAmount +=
                this.list.InboundDetails[i].PCost *
                this.list.InboundDetails[i].PCount
            this.ZeroAmount +=
                this.list.InboundDetails[i].PriceNew *
                this.list.InboundDetails[i].PCount
            this.Difference +=
                this.list.InboundDetails[i].PriceNew *
                    this.list.InboundDetails[i].PCount -
                this.list.InboundDetails[i].PCost *
                    this.list.InboundDetails[i].PCount
        }
        this.time = this.getNowFormatDate()
    },
    methods: {
        getNowFormatDate() {
            //获取当前时间
            var date = new Date()
            var seperator1 = '-'
            var seperator2 = ':'
            var month =
                date.getMonth() + 1 < 10
                    ? '0' + (date.getMonth() + 1)
                    : date.getMonth() + 1
            var strDate =
                date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
            var currentdate =
                date.getFullYear() +
                seperator1 +
                month +
                seperator1 +
                strDate +
                ' ' +
                date.getHours() +
                seperator2 +
                date.getMinutes() +
                seperator2 +
                date.getSeconds()
            return currentdate
        }
    }
}
</script>
<style lang="less" scoped>
.box {
    //background: #ccc;
    width: 1200px;
    height: 100%;
    margin: 0 auto;
}
.header {
    width: 100%;
}
.content {
    margin-top: 20px;
}
.footer {
    margin-top: 20px;
    font-size: 14px;
}
.tableHead {
    font-size: 16px !important;
}
</style>
<style scoped>
.content >>> .el-table td {
    padding: 0 !important;
    height: 40px !important;
}
.content >>> .el-table__row .cell {
    font-size: 12px !important;
}
.content >>> .tableHead >>> .cell {
    font-size: 14px !important;
}
</style>
